在第二篇文章中有提到系統流程圖就是像是咖啡廳的作業流程SOP，以前端開發的角度來解釋，系統流程圖的內容會包含使用者的操作行為以及專案的技術細節(生命週期，元件載入等)。

而UML正適合於此情境使用。

什麼是UML?

UML（Unified Modeling Language，統一建模語言）是一種標準化的建模語言，用於可視化、描述、構造和記錄軟體系統的設計與結構。它被廣泛應用於面向對象的軟體開發和系統設計中，幫助開發者和設計師有效地溝通和理解系統架構。

用白話文說就是，UML定義了各種圖形代表的意涵和規則，讓程式人員能用共通的語言將系統設計和結構轉變為明確可見的圖表，讓溝通變得更加容易。

而UML又提供了非常多種的圖形化表示法，以對應系統的不同層面或視角。常見的 UML 圖包括：

1. 用例圖（Use Case Diagram）：

   描述系統的功能需求以及用戶（或其他系統）如何與系統交互。想像一下你要設計一個軟體系統，比如一個購物網站。用例圖就像是這個網站的「功能清單」，告訴你這個網站可以做哪些事，還有誰會用到這些功能。比如，「客戶」可以瀏覽商品、加入購物車、結帳；「管理員」則可以新增或刪除商品。這樣一來，大家一看這張圖，就知道這個系統的功能和誰會使用這些功能。
   

2. 類圖（Class Diagram）：

   展示系統中類之間的靜態結構，以及它們的屬性和方法。如果把系統比作一個房子，那類圖就像是建造房子的「藍圖」。它展示了系統裡有什麼樣的「類別」，類似於一種設計模型，還有它們各自的屬性和方法。比如，對於購物網站來說，你可能會有「用戶」、「商品」、「訂單」這些類別，每個類別有不同的特徵（屬性）和操作（方法）。類圖讓開發者知道該如何設計和組織這些類別。
   

3. 序列圖（Sequence Diagram）：

   展示系統中對象之間的動態交互，描述消息的交換順序。這個圖展示了系統裡面不同對象之間是怎麼互相交流的。它告訴你每個步驟的順序，從而顯示出整個流程的進行方式。比如在購物網站裡，當客戶點擊「購買」，系統會先檢查庫存、再處理付款，最後確認訂單。序列圖就是用來記錄這一連串的動作和順序。
   

4. 活動圖（Activity Diagram）：

   類似於流程圖，描述系統中的流程或業務邏輯。舉例來說，在購物網站的結帳過程中，客戶可以選擇使用信用卡或者貨到付款。活動圖會清晰展示每一步是怎麼進行的，並告訴你每個選擇之後會發生什麼。
   

5. 狀態圖（State Diagram）：

   描述一個對象在系統中不同的狀態及其之間的轉換。以商品訂單為例，一個訂單可以是「待處理」、「已出貨」、「已完成」或者「已取消」等。狀態圖就是用來說明這個訂單在不同狀態之間是如何轉換的，比如從「待處理」變成「已出貨」的條件是什麼。
   

6. 部署圖（Deployment Diagram）：
   描述系統在硬體或網路上的部署結構。舉例來說，在購物網站上，可能有一台伺服器專門處理客戶請求，另一台伺服器用來存儲資料。部署圖就是用來描述這些硬體資源的佈局，讓大家知道系統是如何部署到網路或硬體設備上的。
   

而前端系統流程圖來說我自己會使用活動圖或是序列圖來進行製做，需要與PM、QA溝通和討論的情境會使用活動圖，而開發內部自行討論的話則使用序列圖來繪製。

那麼本次的前端系統流程圖主要是給自己參考，所以下一篇文章我們就使用序列圖來進行流程圖的製作。

延伸閱讀: 什麼是序列圖?

圖片出處: https://www.visual-paradigm.com/guide/uml-unified-modeling-language/what-is-uml/